<template>
  <div class="c-position-role-add">
    <el-button type="primary" @click="visible = true">
      {{ multLang('btn_add_a') }}
    </el-button>
    <c-dialog
      width="500px"
      custom-class="c-position-role-dialog"
      :visible.sync="visible"
      :title="tplLang('text_add_a', ['title_am_y'])"
      @open="query"
    >
      <!-- <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        :validate-on-rule-change="false"
      >
        <el-form-item prop="keywordSearch">
          <el-input
            v-model="queryForm.keywordSearch"
            :placeholder="multLang('please_enter')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">
            {{ multLang('btn_search_a') }}
          </el-button>
        </el-form-item>
      </el-form> -->
      <c-table
        ref="table"
        select
        :data="table.data"
        :col="table.col"
        @row-click="rowClick"
        @select-change="selectChange"
      ></c-table>

      <template #footer>
        <el-button @click="close">
          {{ multLang('btn_cancel_a') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ multLang('btn_sure_a') }}
        </el-button>
      </template>
    </c-dialog>
  </div>
</template>
<script>
import { addPositionRoleData, getPositionRoleData } from '@/http/api/v1/org'
export default {
  name: 'CPositionRoleAdd',
  components: {},
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      queryForm: {
        position_id: '',
        keywordSearch: ''
      },
      form: {
        position_id: '',
        roleIds: []
      },
      rules: {},
      table: {
        select: '',
        data: [],
        col: [
          { label: 'title_name_w', prop: 'name' },
          { label: 'text_bd', prop: 'description' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    close() {
      this.visible = false
      this.$emit('close')
    },
    query() {
      const { id } = this.data
      getPositionRoleData({ position_id: id }).then(({ data = [] }) => {
        this.table.data = data
      })
    },
    submit() {
      const { id } = this.data
      const roleIds = this.table.select
      addPositionRoleData({ position_id: id, roleIds }).then(() => {
        this.close()
      })
    },
    selectChange(val) {
      this.table.select = val
    },
    rowClick(row) {
      this.$refs.table.rowSelect(row)
    }
  }
}
</script>
<style lang="scss">
.c-position-role-dialog {
  height: 400px;
}
</style>
